<template>
	<z-paging ref="paging" v-model="integrallist" @query="getintegral">
		<template>
			<view class="d-header"></view>
			<view class="">
				<view class="myjifen" v-if="jifen>0">
					我的积分<text style="font-size: 7vw;">{{jifen}}</text>
				</view>
				<view class="myjifen" v-else>
					我的积分<text style="font-size: 7vw;">0</text>
				</view>
				<view class="help" @click="jifenopen">
					积分说明
				</view>
			</view>
			<view class="d-card d-p-b-50">
				<u-grid col="3">
					<u-grid-item @click="qiandaolist">
						<u-image src="/static/qita/icon2.png" width="54rpx" height="54rpx"></u-image>
						<view class="d-font-26 d-m-t-10">签到</view>
					</u-grid-item>
					<u-grid-item @click="points">
						<u-image src="/static/qita/icon.png" width="54rpx" height="54rpx"></u-image>
						<view class="d-font-26 d-m-t-10">积分明细</view>
					</u-grid-item>
					<u-grid-item @click="myclick">
						<u-image src="/static/qita/icon4.png" width="54rpx" height="54rpx"></u-image>
						<view class="d-font-26 d-m-t-10">我的兑换</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="">
				<image class="jifenrenwu" src="../../static/qita/jifenGo.png" mode="aspectFit"></image>
			</view>
			<view class="d-font-40 d-p-30 d-bold">
				好物兑换
			</view>
			<scroll-view scroll-y style="height: 55vh;">
				<view class="d-integrallist">
					<view class="d-font-40 d-p-30" style="text-align: center;" v-for="(item,index) in integrallist">
						{{item.vname}}
						<view class="d-int">
							<view class="d-dap" v-for="(im,inx) in item.data.product" :key="inx" @click="productlick()">
								<view class="d-img">
									<image class="custom-image" :src="im.picture" mode="" v-if="im.picture != ''"
										:onerror="defalutLogoUrl"></image>
									<image class="custom-image" src="../../static/banner/img_banner_02.jpg" mode=""
										v-else></image>
								</view>
								<view class="d-name">
									{{im.goodsname}}
								</view>
								<view class="d-name1">
									原价<text>{{im.saleprice}}元</text>
								</view>
								<view class="d-jifen">
									{{im.sale_score}}积分
								</view>
							</view>
							<view class="d-dap" v-for="(im,inx) in item.data.card" :key="inx" @click="cardclick(im)">
								<view class="d-img">
									<image class="custom-image" :src="im.picture" mode="" v-if="im.picture != ''"
										@error="handleImageError(im)"></image>
									<image class="custom-image" src="../../static/banner/img_banner_02.jpg" mode=""
										v-else></image>
								</view>
								<view class="d-name">
									{{im.parenttype}}11
								</view>
								<view class="d-name1">
									原价<text>{{im.saleprice}}元</text>
								</view>
								<view class="d-jifen">
									{{im.sale_score}}积分
								</view>
							</view>
							<view class="d-dap" v-for="(im,inx) in item.data.ticket" :key="inx"
								@click="ticketclick(im)">
								<view class="d-img">
									<image class="custom-image" :src="im.picture" mode="" v-if="im.picture != ''"
										:onerror="defalutLogoUrl"></image>
									<image class="custom-image" src="../../static/banner/img_banner_02.jpg" mode=""
										v-else></image>
								</view>
								<view class="d-name">
									{{im.consumetype}}
									{{im.chargetype}}
								</view>
								<view class="d-name1">
									原价<text>{{im.saleprice}}元</text>
								</view>
								<view class="d-jifen">
									{{im.sale_score}}积分
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<template>
				<view class="guize" v-if="shuoming" @click="jifeclick">
					<view class="d-bold">1、注册积分</view>
					<view>新注册绑定可获得50积分。</view>
					<view class="d-bold">2、购买积分</view>
					<view>购票购卡可获得积分、购买泳具积分（每消费1元可获得1积分），后期场地预定及私教预约线上付款都算入积分积累规则。</view>
					<view class="d-bold">3、签到积分</view>
					<view>每天签到积分（每签到一次可获得10积分）</view>
					<view class="d-bold">4、阅读购卡须知</view>
					<view>每次购买会员卡时认真阅读购卡须知达到2分钟可获得50积分（一天一次）</view>
					<view class="d-bold">5、查看场馆状态</view>
					<view>每次查阅场馆状态栏的分场馆介绍达1分钟可获得1积分</view>
					<view class="d-bold">6、兑换须知</view>
					<view>积分可兑换卡票、泳具或饮品，卡票可于微信商城直接兑换，泳具及饮品只能至前台兑换，兑换数量约束限制，
						兑换后自动扣除所需积分，积分时效性年度累计不清零。</view>
				</view>
			</template>
		</template>
		<customer-Kefu></customer-Kefu>
	</z-paging>
</template>

<script>
	import {
		myScore,
		haowuduihuan,
		scoresign
	} from '@/common/api';
	import customerKefu from '../../components/customerKefu/customerKefu.vue';
	export default {
		components: {
			customerKefu
		},
		data() {
			return {
				integrallist: [],
				type: "warning",
				value: 2,
				shuoming: false,
				current: 0,
				jifen: '',
				defalutLogoUrl: '../../static/banner/img_banner_02.jpg',
			};
		},
		onLoad(e) {
			if (e.token) {
				uni.$u.vuex('$token', e.token);
			}
		},
		methods: {
			//图片加载失败使用默认图片
			handleImageError(im) {
				console.log(im, '222')
				im.picture = this.defalutLogoUrl;
			},
			productlick() {
				uni.$u.toast('商品请在线下兑换');
			},
			cardclick(im) {
				uni.$u.route({
					url: '/pageA/redemptioncard/redemptioncard',
					params: {
						good_type: im.good_type,
						good_id: im.id
					}
				});
			},
			ticketclick(im) {
				console.log(im, '123132')
				uni.$u.route({
					url: '/pageA/redemption/redemption',
					params: {
						good_type: im.good_type,
						good_id: im.id
					}
				});
			},
			jifeclick() {
				this.shuoming = false
			},
			jifenopen() {
				this.shuoming = true
			},
			qiandaolist() {
				//积分签到
				console.log(111)
				scoresign({
						type: '1'
					})
					.then(res => {
						console.log(res, '888')
						if (res == '操作成功') {
							uni.$u.toast('签到成功');
						}

					})
				// .catch(err => {
				// 
				// });
			},
			myclick() {
				uni.$u.route({
					url: '/pageA/my_redemption/my_redemption',
					params: {
						current: this.current
					}
				});
			},
			points() {
				uni.$u.route({
					url: '/pageA/points_details/points_details',
					params: {
						current: this.current
					}
				});
			},
			getintegral() {

				// 积分兑换商品列表
				haowuduihuan()
					.then(res => {
						this.$refs.paging.complete(res);
						console.log(res, '9966')
					})
				// 我的积分
				myScore()
					.then(res => {
						this.jifen = res
					})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.d-header {
		width: 150vw;
		height: 50vw;
		border-radius: 50%;
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF69A4), color-stop(20%, #FF69A4), color-stop(100%, #FFB449));
		position: fixed;
		top: -18vw;
		left: -25vw;
	}

	.d-card {
		width: 75vw;
		margin: auto;
		height: 7vw;
		background-color: white;
		box-shadow: 0 4px 10px 0 rgba(1, 115, 188, 0.1);
		border-radius: 20px;
		position: relative;
		padding: 3vw 3vw;
		padding-bottom: 8vw !important;
		top: 20vw;
	}

	.myjifen {
		text-align: center;
		color: white;
		position: absolute;
		top: 8vw;
		z-index: 4;
		left: 35%;
	}

	.help {
		height: 5.5vw;
		line-height: 6vw;
		text-align: center;
		color: white;
		border: 2px solid white;
		box-shadow: 2px 1px 4px rgba(240, 240, 240, 0.31);
		position: absolute;
		right: 5vw;
		top: 8vw;
		z-index: 4;
		width: 16vw;
		font-size: 24rpx;
	}

	.jifenrenwu {
		width: 90%;
		height: 190rpx;
		margin-left: 5%;
		margin-top: 160rpx;
	}

	.d-bold {
		font-weight: bold;
	}

	.d-integrallist {
		padding-bottom: 4vw;
		border-radius: 20px 20px 0 0;
		// height: calc(100vh - 75vw);
		height: 55vh;
		overflow-y: auto;
		box-shadow: 0 4px 10px 0 rgba(1, 115, 188, 0.6);
		background-color: white;

		.d-int {
			display: flex;
			flex-wrap: wrap;

			.d-dap {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				width: 40vw;
				height: 360rpx;
				box-shadow: 0 4px 10px 0 rgba(1, 115, 188, 0.2);
				margin-top: 20rpx;
				margin-left: 4vw;
				font-size: 3vw;

				.d-img {
					width: 36vw;
					max-height: 32vw;
					display: flex;
					justify-content: center;
					align-items: center;

					.custom-image {
						max-width: 100%;
						max-height: 100%;
					}
				}

				.d-name {
					padding-top: 2vw;
					max-width: 40vw;
				}

				.d-name1 {
					color: #b2b2b2;
					max-width: 40vw;

					text {
						text-decoration: line-through;
					}
				}

				.d-jifen {
					color: #FFA200;
					max-width: 40vw;
				}
			}

		}
	}

	.guize {
		width: 80vw;
		height: auto;
		border-radius: 2vw;
		box-shadow: 0 0 5px #ddd;
		background-color: white;
		padding: 2vw;
		position: absolute;
		top: 10vw;
		left: 10vw;
		z-index: 2000;
		line-height: 50rpx;
		text-indent: 2em;
		font-size: 28rpx;
	}
</style>